<template>
  <div id="headBox" class>
    <headerT title="我的消息" />
    <div class="pageNormalBackground headMarginTop boxMain" style="heigth:100vh">
      <div class="messageTime">{{messageInfo.created_at}}</div>
      <div class="messageMain">
        <img src="../../../../static/images/systemMessage.png" v-if="messageInfo.type==1" alt />
        <img src="../../../../static/images/orderMessage.png" v-if="messageInfo.type==2" alt />
        <div class="everyBlockBgcolor content">{{messageInfo.content}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { messagesInfo } from "@/services/personCenter";
export default {
  components: {
    headerT
  },
  name: "",

  data() {
    return {
      messageInfo: "" //消息详情
    };
  },
  created() {
    this.getDetaile(this.$route.query.id);
  },
  watch: {},

  methods: {
    getDetaile(id) {
      let obj = {
        message_id: id
      };
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(messagesInfo, obj)
        .then(res => {
          this.$vux.loading.hide();
          this.messageInfo = res.data;
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    }
  }
};
</script>

<style scoped lang="less" rel="stylesheet/less" type="text/css">
.boxMain {
  .messageTime {
    font-size: 0.32rem;
    color: #9f9f9f;
    padding: 0.89rem 0.3rem 0.2rem 0.3rem;
    text-align: center;
  }
  .messageMain {
    padding: 0 0.21rem 0.3rem 0.21rem;
    display: flex;
    img {
      display: block;
      width: 1.9rem;
      height: 1.9rem;
      margin-right: 0.2rem;
    }
    .content {
      width: 5.7rem;
      height: auto;
      padding: 0.27rem 0.32rem;
      border-radius: 0.15rem;
      color: #000000;
      font-size: 0.32rem;
    }
  }
}
</style>
